<template>
	<view class="take-card-main">
		<view class="return-release">
			<view class="return-icon" @click="returnPreview">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="release-text" :class="{'releaseTextActive': computedIsReleaseActive}" @click.stop="takeCard">
				打卡
			</view>
		</view>
		<view class="add-images-or-vedio">
			<view class="image-upload-sucess-show"
				v-if="imageUploadSuccess && !videoUpoadSuccess && !videoCoverPickerShow">
				<view class="images-upload" v-for="(item,index) in uploadimgs" :key="index">
					<image :src="item.imageUrl" mode="aspectFill"></image>
					<view class="delete-icon" @click="deleteImages(item)">
						<uni-icons type="closeempty" size="25" color="#66596b"></uni-icons>
					</view>
				</view>
			</view>
			<view class="video-upload-show" v-if="!imageUploadSuccess && videoUpoadSuccess">
				<video controls :src="uploadVedio" :poster="videoCover"></video>
			</view>
			<view class="video-cover" v-if="!imageUploadSuccess && !videoCoverPickerShow && videoUpoadSuccess">
				<image :src="videoCover" mode="aspectFill"></image>
				<view class="delete-icon" @click="deleteCover">
					<uni-icons type="closeempty" size="25" color="#66596b"></uni-icons>
				</view>
			</view>
			<view class="image-or-video-picker" @click="openSelectPop"
				v-if="!videoCoverPickerShow && !videoUpoadSuccess && !overNinePic&&uploadimgs.length < 9">
				<uni-icons type="plusempty" size="26" color="#000"></uni-icons>
			</view>
			<view class="image-or-video-picker" @click="selectCover" v-show="videoCoverPickerShow">
				选择封面
			</view>
		</view>

		<!-- 文案 -->
		<view class="content-card-copyright">
			<uni-easyinput type="textarea" :inputBorder="false" placeholderStyle="color: #E9E9E9; font-size: 10px"
				autoHeight v-model="cardContent" placeholder="分享美好时刻..."></uni-easyinput>
		</view>

		<!-- 选中的话题和艾特的用户 -->
		<view class="select-topic-user">
			<view class="selected-topic-list" v-if="selectedTopicList.length > 0">
				<text class="selected-topic-item" v-for="(item,index) in selectedTopicList" :key="index">
					{{item.topicName}}&nbsp;
				</text>
			</view>
			<view class="selected-topic-list" v-if="selectedUserList.length > 0">
				<text class="selected-topic-item" v-for="(item,index) in selectedUserList" :key="index">
					{{item.userName}}&nbsp;
				</text>
			</view>
		</view>

		<!-- 话题列表，用户列表 -->
		<view class="topics-users">
			<view class="topics-list" v-if="currentSelectTopicOrUser === 1">
				<view class="topic-item" :class="{ 'topic-select': item.selected }" v-for="(item,index) in topicList"
					:key="index" @click="selectTopic(item)">
					{{item.topicName}}
				</view>
				&emsp13;
			</view>
			<view class="users-list" v-if="currentSelectTopicOrUser === 2">
				<view class="user-item" :class="{ 'topic-select': item.selected }" v-for="(item,index) in aiteUserList"
					:key="index" @click="selectUsers(item)">
					{{item.userName}}
				</view>
				&emsp13;
			</view>
		</view>

		<!-- 话题用户按钮 -->
		<view class="btn-topic-user">
			<view class="btn-topic" :class="{ 'click-topic-user-btn': currentSelectTopicOrUser === 1 }"
				@click="changeCurrentSelectTopicOrUserIndex(1)">
				# 话题
			</view>
			<view :class="{ 'click-topic-user-btn': currentSelectTopicOrUser === 2 }" class="btn-user"
				@click="changeCurrentSelectTopicOrUserIndex(2)">
				@ 用户
			</view>
		</view>

		<!-- 分割线 -->
		<divider-line :width="90" :color="'#f3f3f3'"></divider-line>

		<!-- 标记地点 -->
		<view class="mark-location">
			<view class="mark-location-left">
				<view class="mark-location-icon">
					<uni-icons type="location" size="26"></uni-icons>
				</view>
				<view class="mark-location-text">
					{{markLocationText}}
				</view>
			</view>
			<view class="mark-location-right" @click="toMapPage">
				<uni-icons type="right" size="26" color="#aaaaaa"></uni-icons>
			</view>
		</view>

		<!-- 可见范围 -->
		<view class="card-field">
			<view class="card-field-left">
				<view class="card-field-icon">
					<image src="@/static/icons/card/lock.png" mode="aspectFill"></image>
				</view>
				<view class="card-field-text">
					{{seeFieldText}}
				</view>
			</view>
			<view class="card-field-right" @click="selectSeeField">
				<uni-icons type="right" size="26" color="#aaaaaa"></uni-icons>
			</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup-main">
				<view class="select-item1" @click="pickImage">
					选择图片
				</view>
				<view class="select-item" @click="pickVideo">
					选择视频
				</view>
			</view>
		</uni-popup>

		<!-- 打卡成功之后的提示 -->
		<uni-popup ref="takeCardSuccessPopup" :mask-click="false" type="center" border-radius="10px 10px 0 0">
			<view class="take-card-success-main">
				<view class="take-card-success-desc">
					打卡成功，您获得 {{cardSuccessRecord}} 积分
				</view>
				<view class="distance-last-card" v-if="nearestCardHistory != null && nearestDistance != '0'">
					历史打卡中距离您最近的（<text class="near-address" @click="toCardHistoryDeatilPage(nearestCardHistory)">{{nearestCardHistory.cardAddress}}</text>）
					{{nearestDistance}}公里
				</view>
				<view class="distance-last-card" v-if="nearestCardHistory != null && nearestDistance === '0'">
					您已经在此地打过卡了
				</view>
				<view class="take-card-success-confirm" @click="closeTakeCardSuccessPopup">
					<button type="default">好的</button>
				</view>
			</view>
		</uni-popup>

		<!-- 可见范围弹出层 -->
		<uni-popup ref="seeFieldPopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="see-field-popup">
				<view class="see-field-item" @click="selectSeeFieldItem(1)">
					公开可见
				</view>
				<view class="see-field-item" @click="selectSeeFieldItem(2)">
					互关可见
				</view>
				<view class="see-field-item" @click="selectSeeFieldItem(3)">
					仅自己可见
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DividerLine from '@/components/common-components/DividerLine.vue'
	import {
		uploadOss
	} from '@/common/upload-oss/upload.js'
	import {
		getTopicAndUsers,
	} from '@/request/upload.js'
	import {
		deleteOssFile
	} from '@/request/alioss.js'
	import {
		takeCardRelease
	} from '@/request/card.js'
	import mitter from '@/common/mitt/eventBus.js';
	export default {
		components: {
			DividerLine
		},
		data() {
			return {
				videoUpoadSuccess: false,
				videoCoverPickerShow: false,
				imageUploadSuccess: false,
				overNinePic: false, // 是否超过9张图片
				currentSelectTopicOrUser: 0, // 当前选中的话题：1   用户2   都没选中0
				uploadimgs: [
					'https://img2.baidu.com/it/u=625446579,1548674554&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
					'https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
					'https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
					'https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
					'https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
				],
				uploadVedio: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
				videoCover: 'https://img0.baidu.com/it/u=295003109,130135700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
				cardContent: '', // 打卡文案
				selectedTopicList: [], // 选中的话题
				selectedUserList: [], // 选中的用户
				markLocationText: '标记地点',
				markLocation: '', // 标记坐标的经纬度
				cardCity: '', // 打卡城市
				seeFieldText: '可见范围', // 可见范围（公开可见，互关可见，仅自己可见）
				topicList: [{
						topicAid: 1,
						topicName: '#露天电影',
						selected: false
					},
					{
						topicAid: 2,
						topicName: '#朋友聚会首选地',
						selected: false
					},
					{
						topicAid: 3,
						topicName: '#年轻人的休闲方式',
						selected: false
					},
					{
						topicAid: 4,
						topicName: '#户外',
						selected: false
					},
					{
						topicAid: 5,
						topicName: '#水蜜桃',
						selected: false
					},
				],
				aiteUserList: [{
						userAid: 1,
						userName: '@用户1',
						selected: false
					},
					{
						userAid: 2,
						userName: '@用户2',
						selected: false
					},
					{
						userAid: 3,
						userName: '@用户3',
						selected: false
					},
					{
						userAid: 4,
						userName: '@用户4',
						selected: false
					},
					{
						userAid: 5,
						userName: '@用户5',
						selected: false
					},
					{
						userAid: 6,
						userName: '@用户6',
						selected: false
					},
					{
						userAid: 7,
						userName: '@用户7',
						selected: false
					},
					{
						userAid: 8,
						userName: '@用户8',
						selected: false
					},
					{
						userAid: 9,
						userName: '@用户9',
						selected: false
					},
					{
						userAid: 10,
						userName: '@用户10',
						selected: false
					}
				],
				cardSuccessRecord: 0, // 打卡成功之后获得的积分
				nearestCardHistory: null, // 这次打卡距离以前打过的卡距离最近的一次记录
				nearestDistance: null, // 这次打卡距离以前打过的卡距离最近的一次记录之间有多少公里
			};
		},

		computed: {
			// 控制右上角打卡字体的颜色（当上传了图片或者视频，就为true）
			computedIsReleaseActive() {
				return this.uploadimgs.length > 0 || this.uploadVedio !== '';
			},
			// 打卡的时候判断是上传的视频还是图片
			computedIsImage() {
				return this.uploadimgs.length > 0 && this.uploadVedio === '';
			}
		},

		onLoad() {
			this.uploadimgs = [];
			this.uploadVedio = '';
			this.videoCover = '';
			// 获取话题列表和用户列表
			this.getTopicAndUsers();

			const that = this;
			mitter.on('selectedAddress', (data) => {
				if (data) {
					console.log("选择的地址：", data);
					that.markLocationText = data.name;
					that.markLocation = data.location;
					let lastIndex = data.formatted_address.lastIndexOf("市");
					if(lastIndex !== -1){
						that.cardCity = data.formatted_address.slice(0,lastIndex+1);
					}else {
						that.cardCity = data.formatted_address;
					}
				}
			});
		},

		methods: {
			// 获取话题列表和用户列表
			getTopicAndUsers() {
				getTopicAndUsers().then(res => {
					// console.log(res);
					if (res.data.code === 10000 && res.status === 200) {
						this.topicList = res.data.data.topicList;
						this.aiteUserList = res.data.data.userList;
					}
				})
			},
			// 返回上一页
			returnPreview() {
				uni.navigateBack()
			},
			// 打开选择图片还是视频的弹出框
			openSelectPop() {
				this.$refs.popup.open()
			},
			pickImage() {
				const self = this;
				console.log("已经上传了" + self.uploadimgs.length + "张照片");
				self.$refs.popup.close();
				uni.chooseImage({
					count: 9 - self.uploadimgs.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async function(res) {
						uni.showLoading({
							title: '请稍后...'
						})
						console.log(res);
						// console.log(JSON.stringify(res.tempFilePaths));
						const filePathFore = `app/card/card-history/`;
						var imageIndex = self.uploadimgs.length;
						for (const imageFilePath of res.tempFilePaths) {
							// 等待 uploadOss 函数的执行结果
							const imageUrl = await uploadOss({
								filePathFore,
								filePath: imageFilePath
							});
							// 将结果存储在 uploadResults 数组中
							self.uploadimgs.push({
								imageUrl: imageUrl,
								imageIndex: imageIndex
							});
							imageIndex++;
						}
						self.imageUploadSuccess = true;
						self.videoCoverPickerShow = false;
						self.videoUpoadSuccess = false;
						console.log("上传成功之后的照片：", self.uploadimgs);
						uni.hideLoading()
					}
				})
			},
			pickVideo() {
				const self = this;
				if (self.uploadimgs.length > 0) {
					uni.showToast({
						title: '请先删除图片再上传视频',
						icon: 'none'
					})
					return;
				}
				self.$refs.popup.close()
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: async function(res) {
						console.log(res.tempFilePath);
						const filePathFore = `app/card/card-history/`;
						self.uploadVedio = await uploadOss({
							filePathFore,
							filePath: res.tempFilePath
						});
						self.imageUploadSuccess = false;
						self.videoCoverPickerShow = true;
						self.videoUpoadSuccess = true;
					}
				})
			},
			selectCover() {
				const self = this;
				if (self.uploadVedio === '') {
					uni.showToast({
						title: '请先上传视频',
						icon: 'none'
					})
					return;
				} else {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							const filePathFore = `app/card/card-history/cover/`;
							self.videoCover = await uploadOss({
								filePathFore,
								filePath: res.tempFilePaths[0]
							});
							self.$refs.popup.close()
							self.imageUploadSuccess = false;
							self.videoCoverPickerShow = false;
							self.videoUpoadSuccess = true;
						}
					})
				}
			},
			deleteImages(item) {
				this.uploadimgs = this.uploadimgs.filter(image => {
					return item.imageIndex !== image.imageIndex;
				})
			},
			deleteCover() {
				this.videoCover = '';
				this.videoCoverPickerShow = true;
			},
			selectTopic(item) {
				item.selected = !item.selected;
				console.log(item);
				this.selectedTopicList = [];
				this.selectedTopicList = this.topicList.filter(item => item.selected);
			},
			selectUsers(item) {
				item.selected = !item.selected
				console.log(item);
				this.selectedUserList = [];
				this.selectedUserList = this.aiteUserList.filter(item => item.selected);
			},
			changeCurrentSelectTopicOrUserIndex(num) {
				if (num === 1) {
					this.currentSelectTopicOrUser = 1;
				} else if (num === 2) {
					this.currentSelectTopicOrUser = 2;
				} else {
					this.currentSelectTopicOrUser = 0;
				}
			},
			toMapPage() {
				uni.navigateTo({
					url: '/pages/common-compoent/MapContainer'
				})
			},
			selectSeeField() {
				this.$refs.seeFieldPopup.open()
			},
			selectSeeFieldItem(num) {
				if (num === 1) {
					this.seeFieldText = '公开可见';
				} else if (num === 2) {
					this.seeFieldText = '互关可见';
				} else if (num === 3) {
					this.seeFieldText = '仅自己可见';
				} else {
					this.seeFieldText = '公开可见';
				}
				this.$refs.seeFieldPopup.close()
			},
			checkConditions() {
				const self = this;
				if (self.uploadVedio != '' && self.videoCover === '') {
					uni.showToast({
						title: '请先上传一张视频封面吧',
						icon: 'none'
					});
					return false;
				}
				if (!self.computedIsReleaseActive) {
					uni.showToast({
						title: '请先上传图片或者视频',
						icon: 'none'
					});
					return false;
				}
				if (self.markLocationText === '' || self.markLocationText === '标记地点' || self.markLocation === '') {
					uni.showToast({
						title: '请先定位打卡坐标',
						icon: 'none'
					});
					return false;
				}
				if (self.seeFieldText === '' || self.seeFieldText === '可见范围') {
					uni.showToast({
						title: '请先选择可见范围',
						icon: 'none'
					});
					return false;
				}
				return true;
			},

			takeCard() {
				const self = this;
				uni.showLoading({
					title: '请稍后...'
				});
				console.log(self.computedIsReleaseActive);
				if (!self.checkConditions()) {
					uni.hideLoading();
					return;
				}
				// 满足条件，执行打卡操作
				const data = {
					isImage: self.computedIsImage,
					images: self.uploadimgs,
					videoUrl: self.uploadVedio,
					videoCover: self.videoCover,
					cardAddress: self.markLocationText,
					position: self.markLocation,
					cardCity: self.cardCity,
					copywritting: self.cardContent,
					aiteUsers: self.selectedUserList,
					topicList: self.selectedTopicList,
					seeField: self.seeFieldText
				};
				console.log("打卡参数：", data);
				takeCardRelease(data)
					.then(res => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code === 10000) {
							if(res.data.data){
								self.cardSuccessRecord = res.data.data.getRecords;
								if(res.data.data.lastNearCardHistory){
									self.nearestCardHistory = res.data.data.lastNearCardHistory
									self.nearestDistance = res.data.data.distance
								}
							}
							self.$refs.takeCardSuccessPopup.open();
						} else {
							uni.showToast({
								title: '打卡失败！请稍后再试...',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error(err);
						uni.showToast({
							title: '打卡失败！请稍后再试...',
							icon: 'none'
						});
					});
			},
			closeTakeCardSuccessPopup(){
				this.$refs.takeCardSuccessPopup.close();
				// 去我的打卡记录页面
				uni.navigateTo({
					url: `/pages/tabBar/component/topBar/card/cardHistoryPage?userAid=${uni.getStorageSync('userAid')}`
				})
			},
			toCardHistoryDeatilPage(nearestCardHistory){
				console.log(nearestCardHistory);
				// 去打卡详情页面
				uni.navigateTo({
					url: `/pages/tabBar/component/topBar/card/cardDetail?cardAid=${nearestCardHistory.aid}`
				})
			}
			
		},
	};
</script>

<style lang="scss" scoped>
	.take-card-main {
		height: 95vh;
		overflow-y: scroll;
		background-color: #fff;
		padding-top: 30px;

		.return-release {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.release-text {
				color: #BDBDBD;
				font-size: 20px;
				font-weight: bold;
			}

			.releaseTextActive {
				color: #66596b;
				font-size: 20px;
				font-weight: bold;
			}
		}

		.add-images-or-vedio {
			margin-top: 20px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			flex-wrap: wrap;

			.image-upload-sucess-show {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.images-upload {
					width: 30%;
					margin-bottom: 10px;
					margin-right: 10px;
					position: relative;

					image {
						width: 100%;
						height: 100px;
					}

					.delete-icon {
						width: 20px;
						height: 20px;
						// border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 0;
						top: 0;
						background-color: #fff;
					}
				}
			}

			.video-upload-show {
				width: 45%;
				height: 110px;
				border-radius: 10px;
				margin-right: 20px;

				video {
					width: 100%;
					height: 110px;
					border-radius: 10px;
				}
			}

			.video-cover {
				width: 110px;
				height: 110px;
				border-radius: 10px;
				position: relative;

				image {
					width: 110px;
					height: 110px;
					border-radius: 10px;
				}

				.delete-icon {
					width: 20px;
					height: 20px;
					// border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 0;
					top: 0;
					background-color: #fff;
				}
			}

			.image-or-video-picker {
				width: 110px;
				height: 110px;
				border-radius: 10px;
				background-color: #E9E9E9;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.content-card-copyright {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
		}

		.select-topic-user {
			width: 90%;
			margin-left: auto;
			margin-right: auto;

			.selected-topic-list {
				margin-bottom: 15px;

				.selected-topic-item {
					color: #405a71;
					font-size: 12px;
				}
			}
		}

		.topics-users {
			margin-top: 20px;
			margin-left: 20px;

			.topics-list {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: scroll;

				.topic-item {
					margin-right: 12px;
					background-color: #f5f5f5;
					color: #919191;
					white-space: nowrap;
					/* 防止内容换行 */
					flex-shrink: 0;
					/* 防止子元素被压缩 */
					display: flex;
					align-items: center;
					justify-content: center;
					padding-left: 12px;
					padding-right: 12px;
					border-radius: 20px;
					font-size: 12px;
					height: 35px
				}

				.topic-select {
					background-color: #66596b;
					color: #fff
				}

			}

			.topics-list::-webkit-scrollbar {
				display: none;
				/* 对于 Chrome、Safari 和 Opera 浏览器，隐藏滚动条 */
			}

			.users-list::-webkit-scrollbar {
				display: none;
				/* 对于 Chrome、Safari 和 Opera 浏览器，隐藏滚动条 */
			}

			.users-list {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: scroll;

				.user-item {
					margin-right: 12px;
					background-color: #f5f5f5;
					color: #919191;
					white-space: nowrap;
					/* 防止内容换行 */
					flex-shrink: 0;
					/* 防止子元素被压缩 */
					display: flex;
					align-items: center;
					justify-content: center;
					padding-left: 12px;
					padding-right: 12px;
					border-radius: 20px;
					font-size: 10px;
					height: 35px
				}

				.topic-select {
					background-color: #66596b;
					color: #fff
				}
			}
		}

		.btn-topic-user {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 20px;
			display: flex;

			.btn-topic {
				background-color: #e7e7e7;
				padding: 12px;
				border-radius: 40px;
				height: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn-user {
				margin-left: 20px;
				background-color: #e7e7e7;
				padding: 12px;
				border-radius: 40px;
				height: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.click-topic-user-btn {
				background-color: #66596b;
				color: #fff;
			}
		}

		.mark-location {
			margin-top: 30px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.mark-location-left {
				display: flex;
				align-items: center;

				.mark-location-text {
					margin-left: 7px;
					font-size: 18px;
				}
			}
		}

		.card-field {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;

			.card-field-left {
				display: flex;
				align-items: center;

				.card-field-icon {
					image {
						width: 25px;
						height: 25px;
					}
				}

				.card-field-text {
					margin-left: 7px;
					font-size: 18px;
				}
			}
		}

		.popup-main {
			height: 150px;
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			// background-color: #BDBDBD;
			.select-item {
				height: 50%;
				width: 100%;
				// background-color: #55ffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				letter-spacing: 2px;
			}

			.select-item1 {
				height: 50%;
				width: 100%;
				// background-color: #55ffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: solid 1px #d9d9d9;
				font-size: 32rpx;
				letter-spacing: 2px;
			}
		}

		.see-field-popup {
			height: 200px;
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			border-radius: 10px 10px 0 0;

			.see-field-item {
				width: 100%;
				height: 33.33%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: solid 1px #f0f0f0;
				font-size: 32rpx;
				letter-spacing: 2px;
			}

		}

		.take-card-success-main {
			width: 300px;
			height: 300px;
			border-radius: 40px;
			background-color: #fff;
			box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);
			position: relative;
			
			.take-card-success-desc{
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				padding-top: 30px;
				color: #000;
				font-size: 18px;
			}
			.distance-last-card{
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 40px;
				color: #000;
				font-size: 18px;
				.near-address{
					color: #405a71;
				}
			}
			.take-card-success-confirm{
				position: absolute;
				bottom: 0;
				width: 100%;
				border-radius: 0 0 40px 40px;
				button{
					width: 100%;
					color: #fff;
					background-color: #66596b;
					border-radius: 0 0 40px 40px;
					font-size: 20px;
					letter-spacing: 2px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>